/**
 * Created by zhouli on 2019/2/25.
 */
import React from 'react';
import {connect} from 'react-redux';
import {Input, Button} from 'antd';
import {messages} from 'share/common';
import menuRoute from 'routes/menuRoute';
import FoundPassword from 'containers/login/components/account-login/find-password/found-password';
import ActiveAccount from 'containers/login/components/account-login/active-account/active-account';
import 'styles/login/components/account-login/account-login.scss';
import 'styles/login/login-refactoring-ui.scss'

class AccountLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: "",
      username: "",
      password: "",
      phoneNum: "",
      loginWayList: [
        {
          key: "AccountLogin",
          message: messages('login.key27')/*账号登录*/,
          active: true,
        },
        {
          key: "ActiveAccount",
          message: messages('login.key1')/*激活账号*/,//账号登陆属于账号登录 by 王子豪
          active: false,
        },
        {
          key: "FoundPassword",
          message: messages('login.key60')/*忘记密码*/,//找回密码属于账号登录 by 王子豪
          active: false,
        },
      ],
    }
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  //登录
  login = () => {
    let login = {
      username: this.state.username,
      password: this.state.password,
      loginType: "",
      clientName: "",
      loginId: undefined
    };
    this.props.login(login);
  };
  //输入时，取消loading
  inputUsernameHandler = (evt) => {
    this.setState({
      username: evt.target.value,
      loading: false
    });
  };
  //输入时，取消loading
  inputPasswordHandler = (evt) => {
    this.setState({
      password: evt.target.value,
      loading: false
    });
  };
  //获取找回密码的信息
  getFoundPassword = (msg1, username) => {
    if(msg1 === "resetThenLogin"){
      this.setState({
        username,
      });
    }
    this.onActiveKey("AccountLogin")
  };
  //获取激活账号的信息
  getActiveAccount = (msg1, username) => {
    if(msg1 === "resetThenLogin"){
      this.setState({
        username,
      });
    }
    this.onActiveKey("AccountLogin")
  };
  //激活某一组件
  onActiveKey = (key) => {
    const {loginWayList} = this.state;
    loginWayList.map((item) => {
      item.active = (key === item.key);
    });
    this.setState({
      loginWayList
    })
  };

  renderLoginWay = () => {
    const {loginWayList} = this.state;
    let activeKey = "";
    loginWayList.map(item => {
      if (item.active) {
        activeKey = item.key;
      }
    });
    if (activeKey === "AccountLogin") {
      return this.renderAccountLogin();
    }
    if (activeKey === "ActiveAccount") {
      return <ActiveAccount parentMessage={this.getActiveAccount}/>;
    }
    if (activeKey === "FoundPassword") {
      return <FoundPassword parentMessage={this.getFoundPassword}/>;
    }
  };
  setLoading = (loading) => {
    this.setState({
      loading
    })
  };
  renderAccountLogin = () => {
    const {loading,username, password} = this.state;
    return <div>
      <div className="inp-wrap">
        <Input
          className="user-name"
          size="large"
          value={username}
          placeholder={messages('login.key28')/*手机号或邮箱*/}
          onChange={this.inputUsernameHandler}
        />
        <Input
          className="password"
          size="large"
          type="password"
          placeholder={messages('login.key29')/*密码*/}
          onChange={this.inputPasswordHandler}
          onPressEnter={this.login}
        />
      </div>

      <div className="inp-bottom">
        <div className="f-left jump-component"
             onClick={() => {
               this.onActiveKey("ActiveAccount")
             }}> {messages('login.key1')/*激活账号*/}
        </div>
        <div className="f-right jump-component"
             onClick={() => {
               this.onActiveKey("FoundPassword")
             }}> {messages('login.key60')/*忘记密码*/}
        </div>
        <div className="clear"/>
      </div>
      <Button type="primary"
              size="large"
              className="login-refactoring-btn"
              disabled={!password || !username}
              onClick={this.login}
              loading={loading}>{messages('login.key30')/*登录*/}
      </Button>
    </div>
  };

  render() {
    return (
      <div className="account-login login-refactoring-ui">
        {this.renderLoginWay()}
      </div>
    )
  }
}

AccountLogin.propTypes = {
  login: React.PropTypes.func,
};

AccountLogin.contextTypes = {
  router: React.PropTypes.object,
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    tenant: state.login.tenant
  }
}

export default connect(mapStateToProps)(AccountLogin);

